<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
  
        <parent></parent>

    </div>

   
    <template id="parent">
        <div>
            <h3>parent - 父组件</h3>
            <p style="width:200px;height:200px;background:pink" v-if ="show">子组件控制我的显示和隐藏</p>

           
          
        </div>
    </template>


   
    <template id="childone">
        <div>
           
            <h4>childone - 1 - 子组件</h4>

            <!-- AAA => 子传父   子元素自定义一个事件     -->
            <button @click = "changeparent">自定义事件 点击修改父组件的msg</button>
            
           
            <p> count --- {{count}} </p> 

            <hr>
        </div>
    </template>


   

</body>
<script>
    // 父组件
    Vue.component("parent", {
        template: "#parent",
        data() { // 必须是一个函数 
            return { // 必须返回一个对象
                msg: "每天进步一点点"
            } 
        },
        methods:{ // DDDD  通过方法 接收 子组件 传来的值
            getNewMsgFromChid(msg){
                this.msg = msg
            }
        }
    })

    // 子组件
    Vue.component("childone", {
        template: "#childone",
        props: ["count"], 

        /* BBB => 子组件 自定义事件的方法  向 父组件 传递 */
        methods:{
            changeparent(){
                // $emit 向 父组件 发送
                this.$emit("myclck","真心累啊")
            }
        }
    })

  


    const header = {
        template: "<header>header - header -header</header>"
    }
    Vue.component("myHeader", header)


    const vm = new Vue({
        data: {
            title: "注册全局组件"
        },
        methods: {

        },
        mounted() {
            document.querySelectorAll("title")[0].innerHTML = this.title
        }
    }).$mount("#app")
</script>

</html>